<template>
	<div class="dashboard-editor-container">

		<panel-group @handleSetbarChartData="handleSetbarChartData" />
		<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
			<el-col :xs="20" :sm="24" :lg="12" >
				<div class="chart-wrapper">
					<bar-chart :chart-data="this.barChartData" />
				</div>
			</el-col>
			<el-col :xs="20" :sm="24" :lg="12">
				<div class="chart-wrapper">
					<bar-chart :chart-data="this.barChartdata" />
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import PanelGroup from './dashboard/PanelGroup'
	import BarChart from './dashboard/BarChart';
	import {
		getData
	} from '@/api/indexChart'
		import store from '@/store'
	export default {
		name: 'Index',
		components: {
			PanelGroup,
			BarChart
		},
		data() {
			return {
				//近7日报警案件
				barChartData: null,
				//近7日处理报警案件
				barChartdata: null,
				//查询需要参数
				queryParams: {
					userId: null,
					userUnity: null
				},
				ChartData: {
					Callpolice: {
						titleData: "近七日报警案件（单位: 件）",
						nameData: "当日报警案件总数",
						dayData: [],
						actualData: []
					}
				},
				Chartdata: {
					dealcase: {
						titleData: "近七日处理报警案件（单位: 件）",
						nameData: "当日处理案件总数",
						dayData: [],
						actualData: []
					}
				},
			}
		},
		created() {
			this.queryParams.userId = store.getters.userId;
			this.queryParams.userUnity = store.getters.userroles.roleId;
			getData(this.queryParams).then(res => {
				for (var i = 0; i < res.rows[0].weekCase.length; i++) {
					this.ChartData.Callpolice.actualData[i] = res.rows[0].weekCase[i].caseNumber
					this.ChartData.Callpolice.dayData[i] = res.rows[0].weekCase[i].caseData
				}
				for (var j = 0; j < res.rows[0].weekCaseVisit.length; j++) {
					this.Chartdata.dealcase.actualData[j] = res.rows[0].weekCaseVisit[j].caseNumber
					this.Chartdata.dealcase.dayData[j] = res.rows[0].weekCaseVisit[j].caseData
				}
				this.barChartData = this.ChartData.Callpolice
				this.barChartdata = this.Chartdata.dealcase
			})
		},
		methods: {
		},
	};
</script>

<style scoped lang="scss">
	.dashboard-editor-container {
		padding: 32px;
		background-color: rgb(240, 242, 245);
		position: relative;

		.chart-wrapper {
			background: #fff;
			padding: 16px 16px 0;
			margin-bottom: 32px;
			min-height: 500px;
		}
	}

	@media (max-width:1024px) {
		.chart-wrapper {
			padding: 8px;
		}
	}
</style>
